<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>首页--视频演示</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .shipinyanshi .main .video .video-item{
            height: 1.11rem;
            padding: .16rem 0;
        }
        .shipinyanshi .main .video .video-item .right{
            height: 1.11rem;
        }
        .shipinyanshi .main .video .preview-img{
            width: 1.46rem;
            height: 1.11rem;
            background: #000;
            object-fit: cover;
        }
    </style>
</head>

<body>
<div class="app" v-cloak >
    <div class="shipinyanshi">
        <div class="main">
            <div class="video">
                <div v-if="listVideos&&listVideos.length>0">
                    <div class="video-item" v-for="(video, index) in listVideos" :key="video.id" @click="playVideo(video, index)">
                        <img :src="video.imageUrl" class="preview-img">
                        <div class="right" >
                            <p class="video-name">{{video.title}}</p>
                            <div class="date">{{video.publishTime | handleTimePlus('//::')}}</div>
                        </div>
                        <div class="right-btn" @click.stop="changeCollect(video)">
                            <div :class="['collect-btn', {active: video.isCollect}]" ></div>
                        </div>
                    </div>
                    <div class="no-more" v-if="!hasNext">没有更多了</div>
                </div>
                <div v-else class="collect-empty">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                    <div>暂无内容～</div>
                </div>
            </div>
        </div>
    </div>
    <div class="peijianshangcheng">
        <div class="release" @click="goEditPage">
            <div class="release-icon"></div>
            <div class="release-text">发布</div>
        </div>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>

<script>
    apiready = function () {
        vm = new Vue({
            el: '.app',
            data() {
                return {
                    listVideos: [],
                    // 当前播放视频
                    currentVideo: {
                        title:null,
                        imageUrl:null,
                        playUrl:null,
                        isCollect:false,
                        createTime:null,
                    },
                    module: 'VIDEO_SHOW',
                    hasNext:true,
                    queryInfo: {pageNum: 1, pageSize: 5, status: 1, checkStatus: 1},
                    authStatus:{
                        merchant:-1,
                        personal:-1
                    }
                }
            },
            filters:{
                handleTimePlus:handleTimePlus
            },
            mounted: function () {
                this.getAuthorizationStatus()
                this.getVideoData()
            },
            methods: {
                /**
                 * 获取个人认证和商店认证
                 */
                getAuthorizationStatus() {
                    let vm = this
                    mime("getAuthorizationStatus")(function(ret) {
                        vm.authStatus.merchant = ret.data.merchant
                        vm.authStatus.personal = ret.data.personal
                    })
                },
                /**
                 *去编辑页面
                 */
                goEditPage(){
                    if (!checkToken()) return false;
                    if(vm.authStatus.merchant == 1 || vm.authStatus.personal == 1){
                        api.openWin({
                            name: 'release_edit_win',
                            url: '../release/release_edit_win.html',
                            bounces: false,
                            pageParam: {
                                editName: '视频演示',
                                status: 'edit'
                            }
                        });
                    }else{
                        toastMiddle('认证通过后才可进行发布')
                    }
                },

                changeCollect(item) {
                    const vm = this
                    var param = {favorite: !item.isCollect, module: vm.module, moduleMediaId: item.id}
                    if (!item.isCollect) {
                        common("addCollect")(param, function(ret) {
                            toastMiddle("收藏成功，可在“我的收藏”中查看")
                            item.isCollect = !item.isCollect;
                            vm.sendEventUpdateCollect(item)
                        })
                    } else {
                        common("cancelCollect")(param, function(ret) {
                            toastMiddle("取消收藏，已经从“我的收藏”中移除")
                            item.isCollect = !item.isCollect;
                            vm.sendEventUpdateCollect(item)
                        })
                    }

                },

                sendEventUpdateCollect: function (item) {
                    var index = this.listVideos.findIndex(target => {
                        return target.id == item.id
                    })
                    if (index > -1) this.listVideos[index].isCollect = item.isCollect
                    if (this.currentVideo.id == item.id) {
                        api.sendEvent({
                            name: 'collectCurVideoFrm',
                            extra: {
                                videoCollectStatus: item.isCollect,
                            }
                        });
                    }
                },

                playVideo: function (video, index) {
                    let vm = this
                    this.currentVideo = video
                    addBrowse(vm.module, video.id)
                    api.sendEvent({
                        name: 'eventCurVideo',
                        extra: {
                            currentVideo: video
                        }
                    });
                },

                getVideoData: function () {
                    var vm = this
                    index.video("getListVideoShow")(vm.queryInfo, function (ret) {
                        for (let i in ret.data.list) {
                            ret.data.list[i].isCollect = false
                            ret.data.list[i].playURL = ''
                        }
                        if(vm.queryInfo.pageNum == 1){
                            vm.listVideos =  ret.data.list
                        }else{
                            vm.listVideos =  vm.listVideos.concat(ret.data.list)
                        }
                        vm.hasNext = ret.data.hasNext
                        vm.doHasCollect(vm.listVideos)
                    })
                },

                doHasCollect(listVideos){
                    var vm = this;
                    const param = {"module": "VIDEO_SHOW", "moduleMediaId": []}
                    if (listVideos <= 0){
                        return false
                    }
                    listVideos.forEach(item => {
                        param.moduleMediaId.push(item.id)
                    })
                    this.currentVideo = listVideos[0]
                    fnPostLoading(interfaces.PRODUCT_MODULE.COLLECTION.CHECK_HAS_COLLECT, param, false, function(ret, err) {
                        if(ret && ret.code === RESPONSE_OK){
                            vm.listVideos.map((item, index) => {
                                item.isCollect = ret.data.indexOf(item.id) > -1
                            })
                        }
                        if(vm.queryInfo.pageNum != 1 || api.pageParam.videoId) return
                        api.sendEvent({
                            name: 'eventCurVideo',
                            extra: {
                                currentVideo: listVideos[0]
                            }
                        });
                    });
                },
            },
        })

        // 下拉刷新
        api.setRefreshHeaderInfo({
            bgColor: '#f7f7f7',
            textDown: '下拉更新有惊喜',
            textUp: '松开可以刷新'
        }, function(ret, err) {
            vm.queryInfo.pageNum = 1
            vm.getVideoData()
        });

        api.addEventListener({
            name: 'collectCurVideoWin'
        }, function (ret, err) {
            vm.changeCollect(ret.value.currentVideo)
        });

        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: -10
            }
        }, function (ret, err) {
            if (vm.hasNext) {
                vm.queryInfo.pageNum++
                vm.getVideoData()
            }
        });

        api.addEventListener({
            name: 'login'
        }, function(ret, err) {
            vm.getAuthorizationStatus()
        })
    }
</script>
</body>

</html>
